<template>
	<div class='show-container'>
		<div class='show-head'>
			<span class='show-title'>{{title}}</span>
			<span class='show-num'>{{items.length}}</span>
		</div>
		<div class='show-body'>
			<todo-item v-for="item in items"
			 :key="item.index"
			 :index="item.index"
			 :text="item.text"
			 :completed="item.completed" 
			 :toogle-item="toogleItem" 
			 :on-delete="onDelete"></todo-item>
		</div>
	</div>
</template>

<script>
import TodoItem from './ToDoItem.vue';

export default {
	data() {
		return {
			
		}
	},
	props: {
		items: {
			type: Array,
			required: true
		},
		title: {
			type: String,
			required: true
		},
		onDelete: {
			type: Function,
			required: true
		},
		toogleItem: {
			type: Function,
			required: true
		}
	},
	components: {
		'todo-item': TodoItem
	}
}
</script>

<style lang="less" scoped>
	.show-container {
		width: 600px;
		margin: 0 auto;
		
		.show-head {
			height: 33px;
			margin: 15px 0;
			
			.show-title {
				font-size: 26px;
				line-height: 30px;
				float: left;
			}
			
			.show-num {
				float: right;
				width: 15px;
				height: 20px;
				border-radius: 20px;
				background: #E6E6FA;
				line-height: 22px;
				color: #666;
				font-size: 14px;
				text-align: center;
			}
		}
	}
</style>

